<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Singulart | 艺术品交易中心</title>
    <!-- 新 Bootstrap5 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">

    <!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>

    <!-- Bootstrap5 图标库 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.0/font/bootstrap-icons.css">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
            integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
            integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
            crossorigin="anonymous"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/导航样式.css" type="text/css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/首页样式.css" type="text/css">
    <style>
        /* popular用于制作我们热爱的艺术家中的人物图片 */

        .popular {
            width: 150px;
            height: 150px;
            border-radius: 150px;
            overflow: hidden;
            border: 4px solid #d5a770;
            display: inline-block;
            vertical-align: top;
            text-align: center;
        }

        /* 背景设置，暂时用不上，先留着，后面再用 */

        .background_chat {
            background-size: 800px 539px;
            background-position: 50%;
            background-repeat: no-repeat;
            position: absolute;
            right: 0;
            top: 0;
            width: 800px;
            height: 539px;
        }

        /* 鼠标经过时改变字体颜色 */

        .text-color:hover {
            color: #d5a770;
        }

        /* header,隐藏头部盒子*/
        .header-box {
            position: relative;
        }

        .header-menu {
            position: relative;

            display: none;
        }

        .header-box:hover .header-menu {
            display: block;

        }
    </style>
</head>
<body class="">
<!-- 头部导航 -->
<header class="header position-fixed">
    <div class="header-info bg-black  ">
        全球包邮包退 <span class="d-none d-lg-block"></span>
    </div>
    <div class="mobile-header bg-black">

        <div class="logo">
            <a href="../index/艺术中心首页.html"><img src="../../assets/images/logo/线上购买艺术品.644115a1.svg" alt="线上购买艺术品"
                                                title="线上购买艺术品"></a>
        </div>
        <div class="quickaccess">
            <div class="search">
                <i class="bi bi-search icon icon-ico-search lnk"></i>
            </div>
            <div class="favorites">
                <a href="/zh/account/wishlist" class="main-menu-wishlist"><i
                        class="bi bi-heart icon icon-ico-heart-empty"></i><span class="items">0</span></a>
            </div>

            <div class="cart">
                <a href="/zh/checkout/cart"><i class="bi bi-bag icon icon-ico-cart2"></i><span
                        class="items">0</span></a>
            </div>
        </div>
        <div id="hamburger">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <div class="main-header bg-black d-none d-lg-block">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-3">
                    <div class="logo ">
                        <a href="../index/艺术中心首页.html">
                            <img src="../../assets/images/logo/线上购买艺术品.86d9afd4.svg" alt="线上购买艺术品" title="线上购买艺术品">
                        </a>
                    </div>
                </div>
                <div class="col-md-6 ">
                    <nav class="menu ">
                        <ul class="enabled main-nav text-center ">
                            <li class="main-nav-element header-box">
                                <a class="mega-menu dd ga text-decoration-none  " href="../index/商品详情.html"
                                   target="_self">艺术品<i class="bi bi-chevron-down"></i></a>
                                <div class="sub-menu-block header-menu">
                                    <div class="row">

                                    </div>
                            </li>
                            <li class="main-nav-element">
                                <a class="mega-menu dd ga  text-decoration-none"
                                   href="../index/Laurent Prudot - 画家.html" target="_self">艺术家<i
                                        class="bi bi-chevron-down"></i></a>
                                <div class="sub-menu-block">
                                    <div class="row">

                                    </div>
                                </div>
                            </li>
                            <li class="main-nav-element">
                                <a class="mega-menu dd ga  text-decoration-none" href="../index/作品集.html"
                                   target="_self">作品集<i class="bi bi-chevron-down"></i></a>
                                <div class="sub-menu-block">
                                    <div class="row">

                                    </div>
                                </div>

                            </li>
                </div>
                <div class="col-md-3">

                    <div class="secondary-nav ">
                        <div class="cart ">
                            <a href="/zh/checkout/cart"><i
                                    class=" bi bi-bag icon icon-ico-cart2 text-white"></i><span
                                    class="items">0</span></a>
                        </div>

                        <div class="favorites  header-box ">
                            <a href="/zh/account/wishlist" class="main-menu-wishlist"><i
                                    class="bi bi-heart icon icon-ico-heart-empty"></i><span
                                    class="items">0</span></a>
                            <div>
                                <div class="favorites-tooltip header-menu bg-white pt-1  m-auto"
                                     style="width: 250px;height:100px;position: relative;left:-140px;top:5px">

                                    <div class="text-center m-2 " style="height:30px;">我的最爱</div>
                                    <div class="m-0 p-0"
                                         style="background-color:#d5a770;border-top:1px solid #f2f2f2">
                                        <a class="text-dark"
                                           style="line-height:10px;position: relative;bottom:15px;"
                                           href="../index/艺术中心用户后台.html" target="_self">查看我的最爱</a>
                                    </div>
                                </div>
                                <svg style="position: relative;bottom:112px;left:10px;"
                                     xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                     class="bi bi-caret-up-fill text-white" viewBox="0 0 16 16">
                                    <path
                                            d="m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z" />
                                </svg>
                            </div>
                        </div>


                        <!-- 登录界面按钮 -->
                        <div class="account ">
                            <button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#myModal">
                                <i class="user-login lnk icon icon-ico-user bi bi-person"></i> </button>
                        </div>

                        <div class="search ">
                            <i class="icon icon-ico-search lnk bi bi-search"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</header>
<!-- 模态框专用 -->
<jsp:include page="${pageContext.request.contextPath}/pages/index/model.jsp"/>
</body>

</html>